package com.miui.theme.custom.screen

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import com.miui.theme.custom.components.AppTopAppBar
import com.miui.theme.custom.data.DatabaseConfig
import com.miui.theme.custom.navigation.currentComposeNavigator
import com.miui.theme.custom.viewmodel.ConfigViewModel
import org.koin.androidx.compose.koinViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ConfigScreen(viewModel: ConfigViewModel = koinViewModel()) {
    val navigator = currentComposeNavigator
    val config by viewModel.configFlow.collectAsState(initial = null)

    // 用于本地编辑的状态
    var host by remember(config) { mutableStateOf(config?.host ?: "") }
    var port by remember(config) { mutableStateOf(config?.port ?: "") }
    var database by remember(config) { mutableStateOf(config?.database ?: "") }
    var user by remember(config) { mutableStateOf(config?.user ?: "") }
    var pass by remember(config) { mutableStateOf(config?.pass ?: "") }

    // 1. 使用 Scaffold 替换 Column，这更规范
    Scaffold(
        topBar = {
            AppTopAppBar(title = "数据库配置", onNavigateUp = { navigator.navigateUp() })
        }
    ) { padding ->
        // 2. 使用一个可滚动的 Column
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding) // 应用 Scaffold 的安全边距
                .verticalScroll(rememberScrollState()) // 允许在小屏幕上滚动
                .padding(horizontal = 24.dp, vertical = 16.dp), // 增加我们自己的边距
            verticalArrangement = Arrangement.spacedBy(12.dp) // 增加控件间距
        ) {
            // 3. 所有的输入框都使用 fillMaxWidth()
            OutlinedTextField(
                value = host,
                onValueChange = { host = it },
                label = { Text("主机地址 (Host)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true
            )
            OutlinedTextField(
                value = port,
                onValueChange = { port = it },
                label = { Text("端口 (Port)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true,
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
            )
            OutlinedTextField(
                value = database,
                onValueChange = { database = it },
                label = { Text("数据库名 (Database)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true
            )
            OutlinedTextField(
                value = user,
                onValueChange = { user = it },
                label = { Text("用户名 (User)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true
            )
            OutlinedTextField(
                value = pass,
                onValueChange = { pass = it },
                label = { Text("密码 (Password)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true,
                // 4. 优化：为密码框添加密码隐藏
                visualTransformation = PasswordVisualTransformation(),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
            )

            // 5. 在最后一个输入框和按钮之间添加明确的间距
            Spacer(modifier = Modifier.height(16.dp))

            // 6. 按钮同样使用 fillMaxWidth() 并增加高度
            Button(
                onClick = {
                    val newConfig = DatabaseConfig(host, port, database, user, pass)
                    viewModel.saveConfig(newConfig)
                    navigator.navigateUp()
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(48.dp)
            ) {
                Text("保存配置", style = MaterialTheme.typography.titleSmall)
            }
        }
    }
}